<template>
    <s-box title="技术热点">
        <div class="chart-wrap" ref="chart"></div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
           xData:[],
           articleNum:[],
           paperNum:[],
           patentNum:[],
           data2
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
         // 解除事件绑定
         delegate.$off('s-resize',this._initChart)
         delegate.$off('s-search',this._search)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._search)
            delegate.$on('s-resize',this._initChart)
        },
        _search() {

        },
        _setChartOption(){
                let myChart = echarts.init(this.$refs.chart);
                let $this = this;
                myChart.setOption({
                color:['#dd8f04','#6459f0', '#00a3fa'],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        zoomOnMouseWheel:false,
                        start: 1,
                        end: 35
                    },
                ],
                grid: {
                    left: "0",
                    right: "2%",
                    top: "13%",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: $this.xData,
                    interval: 10,
                    axisTick: {
                    show: false,
                    alignWithLabel: true
                    },
                    splitLine: {
                    lineStyle: {
                        type: "dashed",
                        color: "#98caec" //分割线颜色
                    }
                    },
                    axisLine: {
                    lineStyle: {
                        color: "#98caec", //坐标轴线颜色
                        width: 1
                    }
                    },
                    axisLabel: {
                        color: "#98caec" //坐标轴名称颜色
                    }
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                    show: false,
                    alignWithLabel: true
                    },
                    splitLine: {
                    lineStyle: {
                        type: "dashed",
                        color: "#054e76" //分割线颜色
                    }
                    },
                    axisLine: {
                    show:false,
                    lineStyle: {
                        color: "#98caec", //坐标轴线颜色
                        width: 2,
                        
                    }
                    },
                    axisLabel: {
                    color: "#a1d6f8" //坐标轴名称颜色
                    }
                },
                series: [
                    {  
                        name:'新闻',
                        data: $this.articleNum,
                        type: "bar",
                        barGap:'60%',
                        barMaxWidth:'16',
                        itemStyle: {
                            normal: {
				                barBorderRadius:[5, 5, 5, 5],
				            	shadowColor: 'rgba(0, 0, 0, 0.5)',
    							shadowBlur: 10,
    							shadowOffsetX:5,
    							shadowOffsetY:-2,
				                color: function(params) { 
				                     return new echarts.graphic.LinearGradient(0, 0, 0, 1,
			　　　　　　　　　　　　　     [
			　　　　　　　　　　　　　　       {offset: 0, color:'#f29d00' },
										   {offset: 0.7, color:'#895812' },
			　　　　　　　　　　　　　　       {offset: 1, color: 'transparent'}
			　　　　　　　　　　　　　     ]);
				                }
				            },
                        },
                        label: {
			                normal: {
			                    show: true,
			                    color:'#98caec',
                                position: 'top',
                                formatter:'新闻'
			                }
			            },
                        
                    },
                    {
                        name:'论文',
                        data: $this.paperNum,
                        type: "bar",
                        barGap:'60%',
                        barMaxWidth:'16',
                        itemStyle: {
                            normal: {
				                barBorderRadius:[5, 5, 5, 5],
				            	shadowColor: 'rgba(0, 0, 0, 0.5)',
    							shadowBlur: 10,
    							shadowOffsetX:5,
    							shadowOffsetY:-2,
				                color: function(params) { 
				                     return new echarts.graphic.LinearGradient(0, 0, 0, 1,
			　　　　　　　　　　　　　     [
			　　　　　　　　　　　　　　       {offset: 0, color:'#655af3' },
										   {offset: 0.7, color:'#2e2776' },
			　　　　　　　　　　　　　　       {offset: 1, color: 'transparent'}
			　　　　　　　　　　　　　     ]);
				                }
				            },
                        },
                        label: {
			                normal: {
			                    show: true,
			                    color:'#98caec',
                                position: 'top',
                                formatter:'论文'
			                }
			            },
                    },
                    {
                        name:'专利',
                        data: $this.patentNum,
                        type: "bar",
                        barGap:'60%',
                        barMaxWidth:'16',
                        itemStyle: {
                            normal: {
				                barBorderRadius:[5, 5, 5, 5],
				            	shadowColor: 'rgba(0, 0, 0, 0.5)',
    							shadowBlur: 10,
    							shadowOffsetX:5,
    							shadowOffsetY:-2,
				                color: function(params) { 
				                     return new echarts.graphic.LinearGradient(0, 0, 0, 1,
			　　　　　　　　　　　　　     [
			　　　　　　　　　　　　　　       {offset: 0, color:'#00a6fe' },
										   {offset: 0.7, color:'#2e2776' },
			　　　　　　　　　　　　　　       {offset: 1, color: 'transparent'}
			　　　　　　　　　　　　　     ]);
				                }
				            },
                        },
                        label: {
			                normal: {
			                    show: true,
			                    color:'#98caec',
                                position: 'top',
                                formatter:'专利'
			                }
			            },
                    },
                ]
                });
        },
        _getTechnologyHotspot(){
            if(!this.navCurrentId) return;
                    this.xData = [];    
                    this.articleNum = [];    
                    this.paperNum = [];
                    this.patentNum = [];

                    this.api({
                            url: "newtechanalyse/technologyHotspot",
                            method: "post",
                            data:`topicId=${this.navCurrentId}`
                    }).then(data => {
                        let $this = this;
                        data.articleNum.forEach(function(element,index,arr1){
                            $this.xData.push(element.keyword);
                            $this.articleNum.push(element.datanum);
                        });
                        data.paperNum.forEach(function(element,index,arr1){
                            $this.paperNum.push(element.datanum);
                        });
                        data.patentNum.forEach(function(element,index,arr1){
                            $this.patentNum.push(element.datanum);
                        });
                        
                        this._setChartOption();
                    })
        },
         _initChart() {
            this._getTechnologyHotspot();
        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-wrap{
      width: 100%;
      height: 268px;
  }
</style>
